<!DOCTYPE html>
<html lang="en">

  <head prefix="dc: http://purl.org/dc/terms/ og: http://ogp.me/ns#"> <!-- namespaces used in metadata.html -->
    <!--<meta charset="utf-8">-->
    <title>{{ page.title }}</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!-- <meta http-equiv = "X-UA-Compatible" content = "IE = edge"> -->
    <meta http-equiv='Content-Type' content='text/html; charset=utf-8'/>
      <!--[if lt IE 9]>
      <script src = "https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
      <script src = "https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
      <![endif]-->
    <meta name="subtitle" content="{{ page.subtitle }}">
    {% if site.author.OtherName %}
    <meta name="author" content="{{site.author.name}} | {{site.author.OtherName}}">
    {% else %}
    <meta name="author" content="{{site.author.name}}">
    {% endif %}

    {% include metadata.html %}
    <!-- Le styles -->
   <!--<link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Quattrocento+Sans:bold,bolditalic,italic|Quattrocento+Sans">
   <link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Rosario:bold,bolditalic,italic|Rosario"> -->
    <link rel="stylesheet" media="screen" href="https://fontlibrary.org/face/quattrocento-sans" type="text/css"/>
    <link rel="stylesheet" media="screen" href="https://fontlibrary.org/face/rosario" type="text/css"/>

    <!-- bootstrap style -->
    <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css">
    <link href = "{{ site.baseurl }}/assets/css/bootstrap.min.css" rel = "stylesheet">
    <!-- Self-defined style -->
    <link rel="stylesheet" type="text/css" href="{{ site.baseurl }}/assets/css/style.css">

    {% include analytics.html %}

    <!-- Help the browser identify the RSS feed automatically -->
    <link rel="alternate" type="application/rss+xml" title="{{site.title}}" href="{{ site.baseurl }}/atom.xml" />

    <!-- favicon -->
    <link rel="apple-touch-icon" sizes="57x57" href="{{ site.baseurl }}/assets/img/favicon/apple-icon-57x57.png">
    <link rel="apple-touch-icon" sizes="60x60" href="{{ site.baseurl }}/assets/img/favicon/apple-icon-60x60.png">
    <link rel="apple-touch-icon" sizes="72x72" href="{{ site.baseurl }}/assets/img/favicon/apple-icon-72x72.png">
    <link rel="apple-touch-icon" sizes="76x76" href="{{ site.baseurl }}/assets/img/favicon/apple-icon-76x76.png">
    <link rel="apple-touch-icon" sizes="114x114" href="{{ site.baseurl }}/assets/img/favicon/apple-icon-114x114.png">
    <link rel="apple-touch-icon" sizes="120x120" href="{{ site.baseurl }}/assets/img/favicon/apple-icon-120x120.png">
    <link rel="apple-touch-icon" sizes="144x144" href="{{ site.baseurl }}/assets/img/favicon/apple-icon-144x144.png">
    <link rel="apple-touch-icon" sizes="152x152" href="{{ site.baseurl }}/assets/img/favicon/apple-icon-152x152.png">
    <link rel="apple-touch-icon" sizes="180x180" href="{{ site.baseurl }}/assets/img/favicon/apple-icon-180x180.png">
    <link rel="icon" type="image/png" sizes="192x192"  href="{{ site.baseurl }}/assets/img/favicon/android-icon-192x192.png">
    <link rel="icon" type="image/png" sizes="32x32" href="{{ site.baseurl }}/assets/img/favicon/favicon-32x32.png">
    <link rel="icon" type="image/png" sizes="96x96" href="{{ site.baseurl }}/assets/img/favicon/favicon-96x96.png">
    <link rel="icon" type="image/png" sizes="16x16" href="{{ site.baseurl }}/assets/img/favicon/favicon-16x16.png">
    <link rel="manifest" href="{{ site.baseurl }}/assets/img/favicon/manifest.json">
    <meta name="msapplication-TileColor" content="#ffffff">
    <meta name="msapplication-TileImage" content="{{ site.baseurl }}/assets/img/favicon/ms-icon-144x144.png">
    <meta name="theme-color" content="#ffffff">

    <!-- Add softwarecarpentry lesson style sheet -->
    <link href = "{{ site.baseurl }}/assets/css/lesson.css" type="text/css" rel = "stylesheet" />
  </head>
  <!-- Add lesson's javascript. -->
  <script type="text/javascript" src="{{site.baseurl}}/assets/js/lesson.js" async="async"></script>

  <!-- Go to www.addthis.com/dashboard to customize your tools -->
  <script type="text/javascript" src="//s7.addthis.com/js/300/addthis_widget.js#pubid={{site.addthis.pubid}}" async="async"></script>

  <body onload="load()"> <!-- load() is to offset the navbar for anchor links. -->

  {% include navbar.html %}

  <div class="container"> <!-- Twitter bootstrap has all body content in a container -->

    <!-- Custom masthead (big titles) -->

<header class="jumbotron subhead">
    <h1 class="entry-title">{{ page.title }}</h1>
    {% if page.subtitle %}
      <h3> {{page.subtitle}} </h3>
    {% endif %}
</header>
